<%= include ic/header.html %>
<style>
#nav_news{color:#fff;}
#main{text-align:center;}
#detail{float:left;background:#fff;text-align:left;}
#datail-hd{border-bottom:1px solid #ccc;}
#datail-hd .am-u-md-10{line-height:2rem;font-size:1.8rem;color:#000;}
#datail-hd .am-u-md-10 font{font-size:1.2rem;color:#999;}
#datail-hd .am-u-md-1{line-height:4rem;}
#datail-hd font{color:#aaa;}
#datail-cover img{width:100%;height:auto;border-bottom:1px solid #ccc;}
#datail-content{color:#666;overflow:hidden;}
@media only screen and (min-width: 641px){
#datail-hd font.am-show-md-down{display:inline!important;}
}
</style>
<div id="main">
  <div id="btnBack" class="ml15"><a href="javascript:history.go(-1);"><i class="am-icon-caret-left"></i> BACK</a></div>
  <div class="am-cf"></div>
  <div id="detail"  class="ml15">
    <div id="datail-hd" class="am-g">
      <div class="am-u-sm-12 am-u-md-10 am-padding-xs"><%= result.get('title') %><br/><font><%= moment(result.createdAt).zone(-8).format('YYYY-MM-DD') %></font><a><font class="am-show-md-down">&nbsp;&nbsp;&nbsp;&nbsp;<i class="am-icon-eye"></i> <%= result.get('clicks') %></font></a></div>
      <div class="am-u-md-1 am-padding-xs am-hide-md-down"><i class="am-icon-eye"></i> <%= result.get('clicks') %></div>
    </div>
    <div id="datail-cover">
      <img src="/p?id=<%= result.get('cover').id %>" />
    </div>
    <div id="datail-content" class="am-padding-sm"><%- result.get('content') %></div>
  </div>
  <div class="am-cf"></div>
</div>
<%= include ic/footer.html %>
<script type="text/javascript">
$(function() {
  $("#datail-content img").removeAttr("width");
  $("#datail-content img").removeAttr("height");
  $("#datail-content img").addClass("am-img-responsive");
});
</script>
